<template>
	<div>
		<!-- template -->

		<div class="sidebar mm-menu mm-horizontal mm-offcanvas"><div class="sidebar-collapse mm-panel mm-opened mm-current" id="mm-0">
			<!-- Sidebar Header Logo-->
			<div class="sidebar-header">
				<img src="../assets/img/logo.png" class="img-responsive" alt="">
			</div>
			<!-- Sidebar Menu-->
			<div class="sidebar-menu" >
				<nav id="menu" class="nav-main opened" role="navigation">
					<ul class="nav nav-sidebar">
						<div class="panel-body text-center">
							<!--<div class="bk-avatar">
								<img src="../assets/img/avatar.jpg" class="bk-img-60" alt="">
							</div>-->
							<div class="bk-padding-top-10">
								<i class="fa fa-circle text-success"></i> <small>AT-IOT物联网卡管理平台</small>
							</div>
						</div>
						<div class="divider2"></div>
						<li :class="{'active opened': navStatus == 'home' }" @click="getBreadCrumb('首页', 'home')">
							<router-link to="/home"><i class="fa fa-laptop" aria-hidden="true"></i><span>首页</span></router-link>
						</li>
						<!--<li class="nav-parent" :class="{'active opened': navStatus == 'card' }" @click="openChildren($event)">
							<a>
								<i class="fa fa-copy" aria-hidden="true"></i><span>卡管理</span>
							</a>
							<ul class="nav nav-children">
								<li @click="getBreadCrumb('移动卡片管理', 'card')">
									<router-link to="/mobileInfo"><span class="text"> 移动卡片管理</span></router-link>
								</li>
								<li @click="getBreadCrumb('联通卡片管理', 'card')">
									<router-link to="/unicomInfo"><span class="text"> 联通卡片管理</span></router-link>
								</li>
								<li @click="getBreadCrumb('电信卡片管理', 'card')">
									<router-link to="/telecomInfo"><span class="text"> 电信卡片管理</span></router-link>
								</li>
							</ul>
						</li>
						<li class="nav-parent" :class="{'active opened': navStatus == 'order' }" @click="openChildren($event)">
							<a>
								<i class="fa fa-copy" aria-hidden="true"></i><span>订单管理</span>
							</a>
							<ul class="nav nav-children">
								<li @click="getBreadCrumb('订单管理', 'order')">
									<router-link to="/orderInfo"><span class="text"> 订单管理</span></router-link>
								</li>
								<li @click="getBreadCrumb('叠加包订单管理', 'order')">
									<router-link to="/orderPacket"><span class="text"> 叠加包订单管理</span></router-link>
								</li>
							</ul>
						</li>

            <li :class="{'active opened': navStatus == 'bill' }" @click="getBreadCrumb('账单管理')">
              <router-link  to="/billInfo">
                <i class="fa fa-life-bouy" aria-hidden="true"></i><span>账单管理</span>
              </router-link>
            </li>

            <li :class="{'active opened': navStatus == 'gbill' }" @click="getBreadCrumb('客户账单管理')">
              <router-link  to="/geustBillInfo">
                <i class="fa fa-life-bouy" aria-hidden="true"></i><span>账单管理(客户)</span>
              </router-link>
            </li>

						<li :class="{'active opened': navStatus == 'account' }" @click="getBreadCrumb('帐号管理')">
							<router-link  to="/accountInfo">
								<i class="fa fa-life-bouy" aria-hidden="true"></i><span>帐号管理</span>
							</router-link>
						</li>

            <li :class="{'active opened': navStatus == 'agent' }" @click="getBreadCrumb('客户管理')">
              <router-link  to="/agentInfo">
                <i class="fa fa-life-bouy" aria-hidden="true"></i><span>客户管理</span>
              </router-link>
            </li>
						<li class="nav-parent" :class="{'active opened': navStatus == 'system' }" @click="openChildren($event)">
							<a>
								<i class="fa fa-copy" aria-hidden="true"></i><span>系统管理</span>
							</a>
							<ul class="nav nav-children">
								<li @click="getBreadCrumb('管理公告', 'system')">
									<router-link to="/notice"><span class="text"> 管理公告</span></router-link>
								</li>
								<li @click="getBreadCrumb('新增公告', 'system')">
									<router-link to="/noticeAdd"><span class="text"> 新增公告</span></router-link>
								</li>
								<li @click="getBreadCrumb('入库', 'system')">
									<router-link to="/incard"><span class="text"> 入库</span></router-link>
								</li>
							</ul>
						</li>-->

						<!--<li v-for="items in menuList.result" :class="{'active opened': navStatus == 'agent' }" @click="getBreadCrumb('客户管理')">
							<router-link  :to="items.url">
								<i class="fa fa-life-bouy" aria-hidden="true"></i><span>{{items.name}}</span>
							</router-link>
						</li>-->

						<li v-for="items in menuList.result" :class="{'active opened': navStatus == items.code, 'nav-parent':  items.subMenuList.length}" @click="openChildren($event, items.name, items.code, items.subMenuList.length)">
							<router-link class="parent-url"  :to="items.url">
								<i class="fa fa-life-bouy" aria-hidden="true"></i><span>{{items.name}}</span>
							</router-link>
							<ul class="nav nav-children" v-if="items.subMenuList.length">
								<li v-for="lists in items.subMenuList" @click="getBreadCrumb(lists.name, items.code)">
									<router-link :to="lists.url"><span class="text"> {{lists.name}}</span></router-link>
								</li>
							</ul>
						</li>
					</ul>
				</nav>
			</div>
			<!-- End Sidebar Menu-->
		</div>
			<!-- Sidebar Footer-->
			<div class="sidebar-footer mm-panel mm-hidden drop-shadow" id="mm-1">

				<br>
				<div class="copyright text-center">
					<small>ATIOT <i class="fa fa-coffee"></i> <br>Programme design <a href="http://www.swidc.net/" title="蝗虫工作室" target="_blank">蝗虫工作室</a></small>
				</div>
			</div><!-- End Sidebar Footer-->
		</div>

		<!-- template end -->
	</div>
</template>

<script>

	import {mapGetters} from 'vuex'

	export default{
		name: 'adminNav',
		computed: {
			...mapGetters({
				navStatus: 'getAdminNavStatus',
				menuList: 'getMenuList'
			})
		},
		methods: {
			getBreadCrumb (names, status) {


				// 获取面包屑导航
				this.$store.dispatch('fetchBreadcrumb', names)

				// 获取导航选中状态
				this.$store.dispatch('fetchAdminNavStatus', status)

			},
			openChildren (e, name, code, len) {

				let $obj = $(e.target).parents('.nav-parent').find('.nav-children')

				if($obj.css('display') !== 'block'){
					$obj.show()
				}else if(e.target.className == 'parent-url router-link-active' || e.target.className == '') {
					$obj.hide()
				}

				if(len <= 0) {

					this.getBreadCrumb(name, code)
				}

			}
		},
		mounted () {

			 this.$store.dispatch('fetchMenu')
		},
		components: {
		},
		watch: {
			menuList (newval) {

				if(newval.resultCode === '11029') {
					localStorage.setItem("sessionVal", 0);
					window.location.reload()
				}
			}
		}
	}
</script>

<style>

</style>
